<template>
  <div>
    <h1>Multiple Timers</h1>
    <button @click="createTimer">Add Timer</button>
    <div v-for="(timer, index) in timers" :key="index">
      <p>Timer {{ index + 1 }}: {{ timer.time }} seconds</p>
      <button @click="removeTimer(index)">Remove Timer</button>
    </div>
  </div>
</template>

<script setup>
import { ref, effectScope, getCurrentScope, onScopeDispose } from 'vue'

// 创建一个计时器的组合函数
function useTimer() {
  const time = ref(0)
  let interval

  // 使用 effectScope 创建作用域
  const scope = effectScope()

  scope.run(() => {
    // 开启计时器
    interval = setInterval(() => {
      time.value++
    }, 1000)

    // 在作用域销毁时清理定时器
    onScopeDispose(() => {
      clearInterval(interval)
      console.log('Timer stopped and resources cleaned up.')
    })
  })

  return { time, scope }
}

// 管理多个计时器
const timers = ref([])

// 创建新计时器
function createTimer() {
  const newTimer = useTimer()
  timers.value.push(newTimer)
}

// 移除计时器并清理作用域
function removeTimer(index) {
  const timerToRemove = timers.value[index]
  if (timerToRemove && timerToRemove.scope) {
    timerToRemove.scope.stop() // 停止该作用域并触发清理
  }
  timers.value.splice(index, 1) // 从列表中移除计时器
}
</script>
